<template>
	<view class="con">
		<view v-if="type == 1">
			<view class="list" v-for="(item, index) in list" :key="index">
				<view class="list_left">
					<view class="list_left_title">{{ item.name }}</view>
					<view class="list_left_text">
						<image class="list_left_text_img" src="/static/61.png" mode=""></image>
						{{ item.idcard }}
					</view>
					<view class="list_left_text">
						<image class="list_left_text_img" src="/static/62.png" mode=""></image>
						{{ item.phone }}
					</view>
				</view>
				<view class="list_right">
					<view class="list_right_nr" @click="del(item.id, index)">删除</view>
					<view class="list_right_nr" @click="to_guest_detail(2, item.id)">编辑</view>
				</view>
			</view>
			<view class="btn">
				<view class="btn_box">
					<view class="btn_box_right" @click="to_guest_detail(1)">添加入住人</view>
				</view>
			</view>
		</view>
		<!-- 订单选择 -->
		<view v-if="type == 2">
			<view
				class="choose"
				:class="is_show(item) ? 'choose_xz' : ''"
				v-for="(item, index) in list"
				:key="index"
				@click="choose_click(item.id, item)">
				<view class="choose_left">
					<view class="choose_left_title">{{ item.name }}</view>
					<view class="choose_left_text">{{ item.idcard }}</view>
				</view>
				<image class="choose_right" v-if="!is_show(item.id)" src="/static/58.png" mode=""></image>
				<image class="choose_right" v-else src="/static/59.png" mode=""></image>
			</view>
			<view class="btn">
				<view class="btn_box">
					<view class="btn_box_left" @click="to_guest_detail(1)">
						<image class="btn_box_left_img" src="/static/60.png" mode=""></image>
						添加
					</view>
					<view class="btn_box_right" @click="submit">确认选择</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useCityStore } from '@/utils/cityStore.js'
	const cityStore = useCityStore()
	const http = inject('$http')
	let page = ref(1)
	let listtype = ref(true)
	let list = ref([])
	let list_xz = ref([])
	let list_xz_time = ref([])
	let type = ref(1)
	const del = (val, index) => {
		uni.showModal({
			title: '提示',
			content: '是否删除该住户信息',
			success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定')

					http.post('/srapi/wode/address_del', { id: val }).then((res) => {
						console.log('返回值', res)
						uni.showToast({
							mask: true,
							title: res.msg,
							icon: 'none',
							duration: 500
						})

						list.value.splice(index, 1)
					})
				} else if (res.cancel) {
					console.log('用户点击取消')
				}
			}
		})
	}
	const is_show = (val) => {
		let value = list_xz.value.some((item) => item === val)
		return value
	}
	const choose_click = (val, item) => {
		let index = list_xz.value.indexOf(val)
		if (index != -1) {
			list_xz.value.splice(index, 1)
			list_xz_time.value.splice(index, 1)
		} else {
			list_xz.value.push(val)
			list_xz_time.value.push(item)
		}
	}

	const submit = (val) => {
		cityStore.stay_id = list_xz.value
		cityStore.stay = list_xz_time.value
		uni.navigateBack()
	}
	const indexlist = async () => {
		await http.post('/srapi/wode/address').then((res) => {
			console.log('返回值', res.data)
			list.value = res.data
		})
	}

	onShow(() => {
		console.log('页面刷新')
		indexlist()
	})
	onLoad((option) => {
		console.log('接收传参:', option)
		type.value = +option.type
		if (type.value  == 2) {
			console.log('cityStore', cityStore.stay_id)
			list_xz.value = cityStore.stay_id
			list_xz_time.value = cityStore.stay
		}
	})

	const to_guest_detail = (type, id = 0) => {
		uni.navigateTo({
			url: '/pages_A/guest_detail/guest_detail?type=' + type + '&id=' + id
		})
	}
</script>

<style lang="less" scoped>
	.con {
		padding: 25rpx 30rpx;
	}
	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background: #ffffff;
		border-radius: 24rpx;
		margin-bottom: 18rpx;
		padding-bottom: 11rpx;
		.list_left {
			.list_left_title {
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
				margin-bottom: 21rpx;
			}
			.list_left_text {
				font-size: 24rpx;
				font-weight: 500;
				color: #787878;
				margin-bottom: 18rpx;
				.list_left_text_img {
					width: 26rpx;
					height: 24rpx;
					margin-right: 16rpx;
				}
			}
		}
		.list_right {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.list_right_nr {
				width: 82rpx;
				height: 50rpx;
				background: #f6f6f6;
				border-radius: 12rpx;
				font-size: 24rpx;
				font-weight: 500;
				text-align: center;
				color: #000000;
				line-height: 50rpx;
				margin-left: 22rpx;
			}
		}
	}

	.choose {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background: #ffffff;
		border-radius: 24rpx;
		margin-bottom: 18rpx;
		.choose_left {
			.choose_left_title {
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
				margin-bottom: 18rpx;
			}
			.choose_left_text {
				font-size: 24rpx;
				font-weight: 500;
				color: #787878;
			}
		}
		.choose_right {
			width: 32rpx;
			height: 32rpx;
			background: #f4f5f9;
			border: 2rpx solid #e0e2e9;
			border-radius: 10rpx;
		}
	}
	.choose_xz {
		background: #2468fb;
		.choose_left {
			.choose_left_title {
				color: #ffffff;
			}
			.choose_left_text {
				color: #ffffff;
			}
		}
	}

	.btn {
		margin-top: 60rpx;
		height: 115rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		.btn_box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			box-sizing: border-box;
			background: #fff;
			padding: 15rpx 30rpx ;
			padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
			.btn_box_left {
				width: 223rpx;
				height: 78rpx;
				background: #ffffff;
				border: 2rpx solid #2468fb;
				border-radius: 41rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #2468fb;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 21rpx;
				.btn_box_left_img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
			.btn_box_right {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #2468fb;
				border: 2rpx solid #2468fb;
				height: 78rpx;
				border-radius: 39rpx;
				flex: 1;
				font-size: 28rpx;
				font-weight: 700;
				color: #ffffff;
			}
		}
	}

	//
</style>
